<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#tankCanvas{
				display: block;
		        width: 800px;
		        height: 600px;
		        background-image: url(img/stratBg.jpg);
		        background-size: cover;
				border: 1px solid black;
				margin: 100px auto;
				position: relative;
				text-align: center;
			}
			#tankCanvas button{
				background-color:#988162;
				color: white;
				overflow: hidden;
				padding: 15px 50px;
				border-radius: 10px;
				margin-top: 50%;
				position: relative;

			}
			#tankCanvas button:hover .line{
				animation-play-state: running;
				display: block;
			}
			.line{
				cursor: pointer;

    background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
				position: absolute;
    height: 100px;
    display:none;
    width: 80px;
    /*background-color: white;*/
    left: -10px;
    top: -30px;
    transform: rotate(20deg);
    animation-play-state: paused;
    animation-name:ani ;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
			}
			@keyframes ani{
				from{
					left: -10px;
				}
				to{
					left: 150px;
					display: none;
				}
			}
	#pipei{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		left: 0;
		display: none;
		background-color:rgba(7,17,27,0.5);
	}

	#scene{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		left: 0;
		display: none;
		background-color: white;
	}
	#name-warp{
		background-color: rgba(7,17,27,0.4);
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		z-index: 1111111;
		width: 100%;
		text-align: center;
		display: block;
	}
	#name-warp input{
		margin-top: 300px;
		width: 150px;
		border-radius: 10px;
		overflow: hidden;
		height: 30px;
	}
	.name{
		font-size: 25px;
		color: white;
	}
		</style>
	</head>
	<body>
		
		<div id="tankCanvas">
			<div id="name-warp" style="display: none;">
			<input type="text" autofocus="autofocus" placeholder="please input your name"/>
		</div>
		   <P class="name"></P>
			<button class="stratgame" onclick="trankev.stratGame()">START GAME<div class="line"></div></button>
			<button class="stratgame" onclick="trankev.stratGame()">GAME OPTIONS<div class="line"></div></button>
			<button class="stratgame" onclick="trankev.stratGame()">EXIT GAME<div class="line"></div></button>
			<div id="pipei">
				<button>匹配中。。。</button>
			</div>
			<div id="scene">
			<canvas id="canvas" width="800" height="600" style="background-image: url(img/bg.png);"></canvas>
		    </div>
		</div>


		<script src="/socket.io/socket.io.js"></script>
		<script src="js/sgameScene.js"></script>
		<script src="js/event.js"></script>
		<script>
			/*var ar = [10,10,20,50,20]
			ar.splice(3,1)
			console.log(ar)*/
			
		</script>
	</body>
</html>
